<template>
    <div>
        <div class="bg-white w-full p-4 min-h-min h-80 rounded-lg">
            <div class=" font-semibold text-xl text-center">标题:{{ state.messageContent.message }}</div>
            <div class="flex text-base text-slate-300 text-center justify-center items-center mt-3 mb-3">
                <div class="pr-2" v-if="state.messageContent.User">用户:{{ state.messageContent.User.UserName }}</div>
                <div class="pl-2">发布日期:{{ formatDate(state.messageContent.operation_date) }}</div>
            </div>


            <div v-html="state.messageContent.content"></div>
        </div>
        <el-button type="default" size="mini" @click="toPage" class="mt-2">返回</el-button>
    </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { messageByID } from '../api/message/message'
import { useRouter, useRoute } from 'vue-router';
import { formatDate } from '../utils/formatData.js';
import { useTabsStore } from '../store/store'

// 实例化路由
const router = useRouter();
const route = useRoute();
const state = reactive({
    messageContent: '',
    messageID: ''
})
const init = async () =>
{
    // const messageID = route.query.messageID
    const result = await messageByID({ messageID: state.messageID })
    state.messageContent = result.data
}
const toPage = () =>
{
    router.push('/Home')
}
const useData = useTabsStore()
onMounted(() =>
{
    state.messageID = useData.getMessageID();
    init()
})

</script>

<style lang="scss" scoped></style>